import { useCallback } from "react";
import { useState } from "react";
import Child1 from './UseCallbackChild'
const Parent = () => {
// 案例1
  //  const [count, setCount] = useState(0)
  //  const handleFn = useCallback(() => {
  //    console.log("父组件在更新状态count")
  //   setCount(count + 1)
  //  }, [count])
  
  // 案例2
  const [todoList, setToList] = useState([
     {
      title: '标题'
      }
  ])
  
  // 父组件内部的状态，非todoList
  const [name, setname] = useState(1)
  
  const updateName = () => {
    setname(name + 1)
  }
  
  const updateList = useCallback((msg) => {
    let nList = [...todoList]
    nList.push(msg)
    setToList(nList)
  }, [todoList])
  
  return (<div>
  {/* 案例1 */}
  {/* 父组件：
    count: {count}
    <p>
      <button onClick={handleFn}>count++</button>
     </p>
     子组件：
     <Child1 /> */}
     
     {/* 案例2 */}
     name:{name}<br />
     <button onClick={updateName}>更新name</button>
     渲染totoList
     {
       todoList.map((item, key) => <p key={key}>{item.title}</p>)
     }
     
     <Child1 updateList={updateList}  />
  </div>);
}
 
export default Parent;